<!DOCTYPE html>
<html lang="en">
<head>
  <title>Live Cropping Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  <script src="${ctxPath}/static/jcrop/js/jquery.min.js"></script>
  <script src="${ctxPath}/static/jcrop/js/jquery.Jcrop.js"></script>
  <link rel="stylesheet" href="${ctxPath}/static/jcrop/demos/demo_files/main.css" type="text/css" />
  <link rel="stylesheet" href="${ctxPath}/static/jcrop/demos/demo_files/demos.css" type="text/css" />
  <link rel="stylesheet" href="${ctxPath}/static/jcrop/css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
  $(function(){
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      onSelect: updateCoords
    });
  });

  function updateCoords(c)
  {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };

</script>
<style type="text/css">
  #target {
    background-color: #ccc;
    width: 500px;
    height: 330px;
    font-size: 24px;
    display: block;
  }


</style>

</head>
<body>

<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">

<div class="page-header">
<ul class="breadcrumb first">
  <li class="active">Live Demo (JFinal)</li>
</ul>
<h1>Server-based Cropping Behavior</h1>
</div>

        <!-- This is the image we're attaching Jcrop to -->
        <img src="${ctxPath!}/static/jcrop/demos/demo_files/pool.jpg" id="cropbox" />

        <!-- This is the form that our event handler fills -->
        <form action="${ctxPath}/image/crop" method="post" onsubmit="return checkCoords();">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
        </form>

        <p>
            <b>An example server-side crop script.</b> Hidden form values
            are set when a selection is made. If you press the <i>Crop Image</i>
            button, the form will be submitted and a 150x150 thumbnail will be
            dumped to the browser. Try it!
        </p>

    </div>
    </div>
    </div>
    </div>
    </body>
</html>